<template>
	<view class="tabs" :style="{ paddingTop: isIOS ? '40rpx' : '' }">
		<view class="tabs-wrapper" :style="{ paddingBottom: isIOS ? '40rpx' : '' }" :class="{ 'home-tabs-wrapper': currentTab === 0 }">
			<view class="tab-item" :class="{ active: index === currentTab }" v-for="(item, index) in tabs" :key="index" @click="handleTabItemClick(item, index)">{{ item.text }}</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';

	// # props/emit
	defineProps({
		currentTab: Number,
		tabs: Array
	});
	const emit = defineEmits(['tabItemClick']);

	// # data
	const isIOS = ref(false);

	// # methods
	const handleTabItemClick = (tab, index) => {
		emit('tabItemClick', { tab, index });
	};

	// # lifecycle
	onMounted(() => {
		isIOS.value = uni.getSystemInfoSync().platform == 'ios';
	});
</script>

<style lang="scss">
	.tabs {
		height: 56px;

		.tabs-wrapper {
			box-sizing: content-box;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 56px;
			display: flex;
			align-items: center;
			background: #ffffff;
			box-shadow: 0 -1px 0 0 #e9e9e9;
			z-index: 99;
      
			.tab-item {
				flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;

				&.active {
					color: #000000;
					font-weight: bold;
				}
			}
		}

		.home-tabs-wrapper {
			background: #141414;
			box-shadow: none;
      border: none;

			.tab-item {
				color: #c7c7c7;

				&.active {
					color: #ffffff;
				}
			}
		}
	}
</style>
